
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Gamez Bootstarp</title>
    <script th:src="@{/js/jquery-3.3.1.min.js}"></script>
    <!-- Custom Theme files -->
    <link th:href="@{/css/bootstrap.css}" rel='stylesheet' type='text/css' />
    <link th:href="@{/css/styleGame.css}" rel='stylesheet' type='text/css' />
    <link th:href="@{/css/popuo-box.css}" rel="stylesheet" type="text/css" media="all"/>
    <!-- Custom Theme files -->
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
    <script type="text/javascript" th:src="@{/js/jquery.mixitup.min.js}"></script>
</head>
<body>
<!-- Header Starts Here -->
<div class="header">
	<div class="container">
		<div class="logo">
			<a th:href="@{/nav/index}"><img th:src="@{/images/logo.png}" alt=""></a>
		</div>
		<span class="menu"></span>
		<div class="navigation">
            <ul class="navig cl-effect-3" >
                <li><a th:href="@{/nav/index}">Home</a></li>
                <li><a th:href="@{/nav/games}">Games</a></li>
                <li><a th:href="@{/nav/blog}">Blog</a></li>
                <li><a th:href="@{/nav/features}">Features</a></li>
                <li><a th:href="@{/nav/contact}">Contact</a></li>
            </ul>
			<div class="search-bar">
					<input type="text" placeholder="search" required=""  value="search"/>
					<input type="submit" value="" />
			</div>
			<script>
				$( "span.menu" ).click(function() {
				  $( ".navigation" ).slideToggle( "slow", function() {
				    // Animation complete.
				  });
				});
			</script>
			<div class="clearfix"></div>
		</div>
		<div class="clearfix"></div>
	</div>
</div>
<!-- Header Ends Here -->	
<!-- Games Page Starts here -->
<div class="games">
	<div class="container">
		<div class="page-path">
			<ul class="path-list">
				<li><a th:href="@{/nav/index}">Home</a></li>&nbsp;&nbsp;/&nbsp;&nbsp;
				<li class="act">Games</li>
			</ul>
			<p><a th:href="@{/nav/index}">Back to Home</a></p>
			<div class="clearfix"></div>
		</div>
		<h3 class="page-header">
			List of Games Here
		</h3>
		<div class="main">
                <div class="view view-first">
                    <img th:src="@{/images/1.jpg}" />
                    <div class="mask">
                        <h2>Game Never</h2>
                        <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
                        <a th:href="@{/nav/single}" class="info">Play It</a>
                    </div>
                </div>  
                <div class="view view-first">
                    <img th:src="@{/images/2.jpg}" />
                    <div class="mask">
                        <h2>Online Game</h2>
                        <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
                        <a th:href="@{/nav/single}" class="info">Play It</a>
                    </div>
                </div>  
                <div class="view view-first">
                    <img th:src="@{/images/3.jpg}" />
                    <div class="mask">
                        <h2>Delmen lorem</h2>
                        <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
                        <a th:href="@{/nav/single}" class="info">Play It</a>
                    </div>
                </div>  
                <div class="view view-first">
                    <img th:src="@{/images/4.jpg}" />
                    <div class="mask">
                        <h2>Ipsum street</h2>
                        <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
                        <a th:href="@{/nav/single}" class="info">Play It</a>
                    </div>
                </div> 
                <div class="view view-first">
                    <img th:src="@{/images/5.jpg}" />
                    <div class="mask">
                        <h2>Games online</h2>
                        <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
                        <a th:href="@{/nav/single}" class="info">Play It</a>
                    </div>
                </div>  
                <div class="view view-first">
                    <img th:src="@{/images/6.jpg}" />
                    <div class="mask">
                        <h2>Nothing but Game</h2>
                        <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
                        <a th:href="@{/nav/single}" class="info">Play It</a>
                    </div>
                </div>  
                <div class="view view-first">
                    <img th:src="@{/images/2.jpg}" />
                    <div class="mask">
                        <h2>Ipsum street</h2>
                        <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
                        <a th:href="@{/nav/single}" class="info">Play It</a>
                    </div>
                </div> 
                <div class="view view-first">
                    <img th:src="@{/images/1.jpg}" />
                    <div class="mask">
                        <h2>Games online</h2>
                        <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
                        <a th:href="@{/nav/single}" class="info">Play It</a>
                    </div>
                </div>  
                <div class="view view-first">
                    <img th:src="@{/images/4.jpg}" />
                    <div class="mask">
                        <h2>Nothing but Game</h2>
                        <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
                        <a th:href="@{/nav/single}" class="info">Play It</a>
                    </div>
                </div> 
          </div>
          <div class="side-bar">
          	<h4>New games</h4>
          	<ul class="game-list">
          		<li><a href="games.html">Shooting</a></li>
          		<li><a href="games.html">Action</a></li>
          		<li><a href="games.html">Cars</a></li>
          		<li><a href="games.html">Wressling</a></li>
          		<li><a href="games.html">bikes</a></li>
          		<li><a href="games.html">bicycle</a></li>
          		<li><a href="games.html">Racing</a></li>
          		<li><a href="games.html">Zombies</a></li>
          	</ul>
          	<h4>Old games</h4>
          	<ul class="game-list">
          		<li><a href="games.html">Shooting</a></li>
          		<li><a href="games.html">Action</a></li>
          		<li><a href="games.html">Cars</a></li>
          		<li><a href="games.html">Wressling</a></li>
          		<li><a href="games.html">bikes</a></li>
          		<li><a href="games.html">bicycle</a></li>
          		<li><a href="games.html">Racing</a></li>
          		<li><a href="games.html">Zombies</a></li>
          		<li><a href="games.html">Action</a></li>
          		<li><a href="games.html">Cars</a></li>
          		<li><a href="games.html">Wressling</a></li>
          	</ul>
          </div>
          <div class="clearfix"></div>
	</div>
</div>

<!-- Games Page Ends here -->
<!-- What New Part starts Here -->
<div class="what-new">
	<div class="container">
		<h3>What's new</h3>
		<div class="blog-news">
			<div class="blog-news-grid">
				<div class="news-grid-left">
					<h4>06</h4>
					<small>of january 2015</small>
				</div>
				<div class="news-grid-right">
					<h4>Claritas est etiam processus</h4>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim </p>
				</div>
				<div class="clearfix"></div>
			</div>
			<div class="blog-news-grid b_n_g">
				<div class="news-grid-left">
					<h4>28</h4>
					<small>of january 2015</small>
				</div>
				<div class="news-grid-right">
					<h4>Claritas est etiam processus</h4>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim </p>
				</div>
				<div class="clearfix"></div>
			</div>
			<div class="clearfix"></div>
		</div>
		<div class="blog-news b_n">
			<div class="blog-news-grid">
				<div class="news-grid-left">
					<h4>21</h4>
					<small>of january 2015</small>
				</div>
				<div class="news-grid-right">
					<h4>Claritas est etiam processus</h4>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim </p>
				</div>
				<div class="clearfix"></div>
			</div>
			<div class="blog-news-grid b_n_g">
				<div class="news-grid-left">
					<h4>05</h4>
					<small>of january 2015</small>
				</div>
				<div class="news-grid-right">
					<h4>Claritas est etiam processus</h4>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim </p>
				</div>
				<div class="clearfix"></div>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
</div>
<!-- What New Part Endss Here -->
<!-- Footer Starts Here -->
<div class="footer">
	<div class="container">
		<ul class="social">
			<li><i class="fa"></i></li>
			<li><i class="fb"></i></li>
			<li><i class="fc"></i></li>
		</ul>
	</div>
	
</div>
<!-- Footer Ends Here -->
</body>
</html>